<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        /* 超链接 */

        a {
            text-decoration: none;
            color: white;
            font-size: 14px;


        }

        ul li {
            list-style: none;
        }

        .nav {
            width: 94%;
            height: 197.56px;
            margin: 0 auto;
        }

        .nav .hang {
            width: 100%;
            line-height: 66.19px;
            display: flex;
        }

        .nav .hang .lie {
            flex: 23%;
            border-right: 1px solid #fff;
            box-sizing: border-box;
            padding-left: 12px;
        }

        .nav .hang .lie :nth-child(1) {
            flex: 31%;
        }

        .nav .aa {
            background: linear-gradient(to right, #fa5956, #fd8650 54%);
        }

        .nav .bb {
            background: linear-gradient(to right, #4b8fed, #53bced);
        }

        .nav .cc {
            background: linear-gradient(to right, #34c2aa, #6cd557);
        }

        /* 顶部 */
        .box .top {
            width: 100%;
            height: 180.09px;
            background: url("./背景图.jpg");
            background-size: 100% 100%;

        }

        .one-top {
            width: 100%;
            height: 60px;
            background: linear-gradient(to bottom, rgba(0, 0, 0, .4), rgba(0, 0, 0, 0));
            display: flex;

        }

        .dingbu {
            width: 94%;
            height: 44px;
            margin: 0 auto;
            display: flex;
            justify-content: space-between;


        }

        .sousuo {
            background: white;
            border-radius: 44px;
            width: 100%;
            height: 28px;
            padding-left: 15px;
            display: flex;
            position: relative;
            bottom: -8px;

        }

        .sousuo .left {
            padding-left: 5px;
            width: 10%;
            height: 28px;
            background: url("img/n-icon.png") no-repeat 10px 6.8px;
            background-size: 20px;

        }

        .sousuo input {
            outline: none;
            width: 84.5%;
            height: 27.5px;
            border: none;
            color: #666;
        }

        .right {

            width: 15%;
            height: 44px;
            background: url("img/n-icon.png") no-repeat 50% 40%;
            background-size: 23px;


        }

        .right span {
            display: block;
            font-size: .75rem;
            width: 100%;
            line-height: 70px;
            text-align: center;
        }

        /* 结束 */


        .nav a {
            color: #fff;
            text-decoration: none;
        }

        .nav .aa .lie:nth-child(1) {
            background: url('./12.1.png') no-repeat right bottom;
            background-size: 60px auto;
            flex: 31%;
        }

        .nav .aa .lie:nth-child(2) {
            background: url('./12.2.png') no-repeat left bottom;
            background-size: 37px auto;
            flex: 23%;
        }

        .nav .aa .lie:nth-child(3) {
            flex: 46%;
            background: linear-gradient(to right, #ffbc49, #ffd252);
            padding: 0;
        }

        .nav .aa .lie:nth-child(3) a {
            color: #a05416;
            display: block;
            background: url('./12.3.png')no-repeat right bottom;
            background-size: 161px;
            text-align: center;
            position: relative;
            width: 100%;
        }

        .nav .bb {
            margin: 1px 0;
        }

        .nav .bb .lie:nth-child(1) {
            background: url('./12.4.png') no-repeat right bottom;
            background-size: 80px auto;

        }

        .nav .bb .lie:nth-child(2) {
            background: url('./12.5.png') no-repeat left bottom;
            background-size: 32px auto;

        }

        .nav .cc .lie:nth-child(1) {
            background: url('./12.8.png') no-repeat right bottom;
            background-size: 80px auto;

        }

        .nav .cc .lie:nth-child(2) {
            background: url('./12.9.png') no-repeat left bottom;
            background-size: 32px auto;
            /* border-top-right-radius: 8px; */
        }

        /* .nav .aa .lie:nth-child(2){
            width: 23%;
        } */
        .nav .hang .lie:nth-child(1) {
            flex: 31%;
        }

        .nav .hang .lie:nth-child(2) {
            flex: 23%
        }

        .nav .hang .lie:nth-child(3) {
            flex: 23%
        }

        .nav .hang .lie:nth-child(4) {
            flex: 23%
        }

        .nav .aa .lie:nth-child(3) {
            flex: 46%;

        }

        /* 盒子的四个圆角 */
        .nav .aa {
            border-top-left-radius: 8px;
            border-top-right-radius: 8px;
        }

        .nav .cc {
            border-bottom-left-radius: 8px;
            border-bottom-right-radius: 8px;
        }

        .nav .aa .lie:nth-child(3) {
            border-top-right-radius: 8px;
        }

        .nice {
            width: 94%;
            height: 64px;
            background-color: #fff;
            margin: 0 auto;
        }

        .nice .v {
            width: 100%;
            line-height: 66px;
            display: flex;

        }

        .nice .v .lie {
            flex: 25%;
            /* border-right: 1px solid #fff; */
            box-sizing: border-box;
            /* padding-left: 12px; */
        }

        .nice .v .lie:nth-child(1) {
            background: url('./11.png') no-repeat right bottom;
            background-size: 30px auto;
            /* flex: 31%; */
        }

        .nice {
            height: 64px;
            width: 94%;
            margin: 0 auto;
            border-radius: 15px;
            box-shadow: 0px 1px 0px 0px rgb(187, 187, 187);
        }

        .nice ul {
            width: 100%;
            display: flex;
        }

        .nice ul li {
            flex: 20%;
            height: 100%;
            list-style: none;
        }

        .nice ul li a {
            color: rgb(0, 0, 0);
            text-decoration: none;
            font-size: 14px;
        }

        .nice ul li a span {
            display: block;
            margin: 0 auto;
        }

        .nice ul li a span:nth-child(2) {
            width: 100%;
            text-align: center;
        }

        .nice ul li:nth-child(1) a .icon {
            width: 40px;
            height: 40px;
            border-radius: 100%;
            background: url(./11.png) no-repeat;
            background-size: 40px auto;
        }

        .nice ul li:nth-child(2) a .icon {
            width: 40px;
            height: 40px;
            border-radius: 100%;
            background: url(./11.png) no-repeat;
            background-position: 0 -40px;
            background-size: 40px auto;
        }

        .nice ul li:nth-child(3) a .icon {
            width: 40px;
            height: 40px;
            border-radius: 100%;
            background: url(./11.png) no-repeat;
            background-position: 0 -80px;
            background-size: 40px auto;
        }

        .nice ul li:nth-child(4) a .icon {
            width: 40px;
            height: 40px;
            border-radius: 100%;
            background: url(./11.png) no-repeat;
            background-position: 0 -120px;
            background-size: 40px auto;
        }

        .nice ul li:nth-child(5) a .icon {
            width: 40px;
            height: 40px;
            border-radius: 100%;
            background: url(./11.png) no-repeat;
            background-position: 0 -160px;
            background-size: 40px auto;
        }

        /* 底部 */
        .nav2 {
            display: flex;
            flex-wrap: wrap;
            width: 94%;
            height: 105.25px;
            margin: -20px auto;

        }

        .nav2 li {
            flex: 20%;
            height: 52.63px;
        }

        .nav2 li .jl-icon {
            display: block;
            width: 28px;
            height: 28px;
            margin: 0 auto;
            margin-top: 10px;
            background: url("img/v-icon.png");
            background-size: 28px;

        }

        .nav2 li .wz-text {
            display: block;
            width: 100%;
            height: 9.6px;
            font-size: .63rem;
            color: #222;
            text-align: center;

        }

        .nav2 li .b {
            background-position: 0 -28px;
        }

        .nav2 li .c {
            background-position: 0 -56px;
        }

        .nav2 li .d {
            background-position: 0 -84px;
        }

        .nav2 li .e {
            background-position: 0 -112px;
        }

        .nav2 li .f {
            background-position: 0 -140px;
        }

        .nav2 li .g {
            background-position: 0 -168px;
        }

        .nav2 li .h {
            background-position: 0 -196px;
        }

        .nav2 li .i {
            background-position: 0 -224px;
        }

        .nav2 li .j {
            background-position: 0 -252px;
        }

        /* 第二导航栏结束 */

        /* footer开始*/
        .footer {
            width: 100%;
            height: 136.2px;
            position: relative;
            top: 30px;
            background: #fafafc;
        }

        .nav-bot {
            width: 100%;
            display: flex;
            height: 60.6px;
            background-color: white;
            border-top: 1px solid #DBDBDB;
            margin-bottom: 10px;
        }

        .nav-bot .zi {
            flex: 33.3333%;
            height: 59.6px;
            margin: 0 auto;
        }

        .nav-bot .zi span {
            display: block;
            width: 100%;
            height: 17.6px;
            text-align: center;
            color: #333;
            font-size: 12px;
            line-height: 50px;
        }

        .nav-bot .zi .iconfont {
            font-size: 20px;
        }

        .footer p {
            text-align: center;
        }

        .footer .y-a {
            color: #747476;
            font-size: 12px;
        }

        .footer .y-b {
            color: #9D9D9D;
            font-size: 12px;
        }
    </style>
</head>

<body>

    <div class="box">
        <div class="top">
            <div class="one-top">
                <div class="dingbu">
                    <div class="sousuo">
                        <div class="left"></div>
                        <input type="text" placeholder="搜索:目的地/酒店/景点/航班号" style="font-size: 16px;">
                    </div>
                    <div class="right">
                        <a><span>登录</span></a>
                    </div>
                </div>
            </div>
        </div>
        <div class="nice">
            <ul>
                <li><a href=""><span class="icon"></span><span>攻略·景点</span></a></li>
                <li><a href=""><span class="icon"></span><span>门票·活动</span></a></li>
                <li><a href=""><span class="icon"></span><span>美食林</span></a></li>
                <li><a href=""><span class="icon"></span><span>周边游</span></a></li>
                <li><a href=""><span class="icon"></span><span>一日游</span></a></li>
            </ul>
        </div>

        <div class="nav">
            <div class="hang aa">
                <div class="lie"><a href="js">
                        <center><span>酒店</span></center>
                    </a></div>
                <div class="lie"><a href="js">
                        <center><span>民宿·客栈</span></center>
                    </a></div>
                <div class="lie"><a href="js"><span>特价·爆款</span></a></div>
            </div>
            <div class="hang bb">
                <div class="lie"><a href="js">
                        <center><span>机票</span></center>
                    </a></div>
                <div class="lie"><a href="js">
                        <center><span>火车票</span></center>
                    </a></div>
                <div class="lie"><a href="js">
                        <center><span>汽车·船票</span></center>
                    </a></div>
                <div class="lie"><a href="js">
                        <center><span>专车·租车</span></center>
                    </a></div>
            </div>
            <div class="hang cc">
                <div class="lie"><a href="js">
                        <center><span>旅游</span></center>
                    </a></div>
                <div class="lie"><a href="js">
                        <center><span>私家团</span></center>
                    </a></div>
                <div class="lie"><a href="js">
                        <center><span>邮轮游</span></center>
                    </a></div>
                <div class="lie"><a href="js">
                        <center><span>定制游</span></center>
                    </a></div>
            </div>
        </div>
        <ul class="nav2">
            <li><span class=" jl-icon a"></span><span class="wz-text">自由行</span></li>
            <li><span class=" jl-icon b"></span><span class="wz-text">wifi电话卡</span></li>
            <li><span class=" jl-icon c"></span><span class="wz-text">保险·签证</span></li>
            <li><span class=" jl-icon d"></span><span class="wz-text">换钞·购物</span></li>
            <li><span class=" jl-icon e"></span><span class="wz-text">向导·包车</span></li>
            <li><span class=" jl-icon f"></span><span class="wz-text">特价机票</span></li>
            <li><span class=" jl-icon g"></span><span class="wz-text">礼品卡</span></li>
            <li><span class=" jl-icon h"></span><span class="wz-text">申卡·借钱</span></li>
            <li><span class=" jl-icon i"></span><span class="wz-text">社区</span></li>
            <li><span class=" jl-icon j"></span><span class="wz-text">更多</span></li>
        </ul>
        <div class="footer">
            <div class="nav-bot">
                <div class="zi"><span class="iconfont icon-dianhua"></span><span>电话预定</span></div>
                <div class="zi"><span class="iconfont icon-xiazai"></span><span>下载客户端</span></div>
                <div class="zi"><span class="iconfont icon-wode"></span><span>我的</span></div>
            </div>
            <p class="y-a">网站地图&nbsp;|&nbsp;Language&nbsp;|&nbsp;电脑版</p>
            <p class="y-b">@2021携程旅行&nbsp;|&nbsp;泸ICP备08023580号</p>
        </div>
    </div>
</body>

</html>